<template>
    <el-card class="demo-collapse mt-10 container">
        <transition>
            <div class="filter-container" :class="{fold: !show3}">
                <el-row v-for="chose in data" v-model="show3">
                    <el-col :span="2">
                        <div class="grid-content ep-bg-purple npm " style="color: #b1b5c1">{{ chose.label }}</div>
                    </el-col>
                    <el-col :span="22">
                        <div v-if="chose.choises == false && chose.label === '开课日期'" class="grid-content ep-bg-purple-light course_btn course_msg">
                            <el-date-picker
                                v-model="value1"
                                type="datetimerange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            />
                        </div>
                        <div v-else-if="chose.choises == false && chose.label === '上课地点'" class="grid-content ep-bg-purple-light course_btn course_msg">
                            <el-cascader v-model="address" :options="options" @change="handleChange" />
                        </div>
                        <div v-else class="grid-content ep-bg-purple-light course_btn course_msg"
                             @click="onClick(chose.choises, chosemsg,chose.name)" :class="{'is-active': chosemsg.isActive}"
                             v-for="chosemsg in chose.choises">
                            {{ chosemsg.name }}
                        </div>
                    </el-col>
                </el-row>
                <div class="button" v-show="isSHow">
                    <span>重置</span>
                </div>
            </div>
        
        </transition>
        
        <el-link :underline="false" class="open" @click="show3 = !show3"><span>{{ show3 ? '收起' : '展开全部' }}</span>
            <!--      <span v-if="open">收起</span><span v-else>展开全部</span>-->
        </el-link>
    </el-card>
</template>

<script setup lang="ts">
// 重置按钮
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import videoCourse from "@/api/course/videoCourse";
import videoCourseApi from "@/api/course/videoCourse";
import {useVideoCourseStore} from "@/stores/videoCourse";
const props = defineProps<{data:any}>()
const emits = defineEmits(["clickHandler"])

const isSHow = ref(false)
// 上课地点
const address = ref();
const handleChange = () => {}

// defineProps(['choisesList'])
const open = ref(false) //控制展开
const collapseName = ref('down')
const show3 = ref(true)

// const filterInfo = ref([]) //  整个数组
// const filterCode = ref('') // 名称--兴趣爱好
// const filterValue = ref([]) // 具体的选项-- 古典舞 民族舞
// // 初始化数据
// const initFilterMsg = () => {
//     const filterInfo = ref([]) //  整个数组
//     const filterCode = ref('') // 名称--兴趣爱好
//     const filterValue = ref([]) // 具体的选项-- 古典舞 民族舞
// }
// 点击筛选条件
const pageNum = ref(1);
const onClick = (choises: any, chosemsg: any, choseName: any) => {
    const arr = choises.map((item:any) => (
        {
            ...item,
            isActive:false
        }
    ))
    pageNum.value++;
    emits("clickHandler", pageNum.value);
    for (let chosemsg = 0; chosemsg < arr.length; chosemsg++) {
    
    }
    if (!chosemsg.isActive) {
        let activeList = choises.filter((item: any) => item.isActive)
        if (activeList.length >= 3) return ElMessage('同一筛选条件最多选择3个')
    }
    chosemsg.isActive = !chosemsg.isActive
    
    
    // if (activeList.value !== null) {
    //     isSHow.value = true
    // }else if ( chosemsg.isActive) {
    //     isSHow.value = false;
    // }
    
    
}
// 展开/折叠
const collapse = () => {
    if (open.value) {
        collapseName.value = 'down'
    } else {
        collapseName.value = 'up'
    }
    setTimeout(() => {
        open.value = !!!open.value
    }, 50)
    
}




const value1 = ref('')
const value2 = ref('')

const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0) // '12:00:00'
const defaultTime2: [Date, Date] = [
    new Date(2000, 1, 1, 12, 0, 0),
    new Date(2000, 2, 1, 8, 0, 0),
] // '12:00:00', '08:00:00'



const options = [
    {
        value: '安徽',
        label: '安徽',
        children: [
            {
                value: '合肥',
                label: '合肥',
                
            },
            {
                value: '蚌埠',
                label: '蚌埠',
               
            },
        ],
    },
    {
        value: '上海',
        label: '上海',
        children: [
            {
                value: '松江区',
                label: '松江区',
                
            },
            {
                value: '浦东区',
                label: '浦东区',
             
            },
            {
                value: '徐汇区',
                label: '徐汇区',
               
            },
            {
                value: '闵行区',
                label: '闵行区',
             
            },
        ],
    },
    {
        value: '深圳',
        label: '深圳',
        children: [
            {
                value: '龙华区',
                label: '龙华区',
            },
            {
                value: '南山区',
                label: '南山区',
            },
            {
                value: '宝安区',
                label: '宝安区',
            },
        ],
    },
]

</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.bodys {
    background-color: #f5f7f9!important;
    overflow: hidden;
}
.container {
    width: 1200px;
    margin: 20px auto 20px;
}


.grid-content.ep-bg-purple.npm {
    margin-top: 8px;
}


/* 选择属性*/
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    border-radius: 4px;
}
.filter-container {
    position: relative;
    overflow: hidden;
}

/*重置按钮*/
.button {
    position: absolute;
    padding: 3px 0;
    top: 3px;
    right: 30px;
    cursor: pointer;
    color: #f93684;
}
.filter-container.fold {
    height: 155px;
}
.grid-content {
    border-radius: 4px;
}
.course_btn {
    float: left;
    margin-right: 24px;
    color: #7d8090;
    font-size: 14px;
}
.course_label {
    padding: 7px 0;
    color: #b1b5c1;
    font-weight: 100;
}
.course_msg {
    font-size: 14px;
    color: #7d8090;
    padding: 7px 13px;
    margin: 0 24px 10px 0;
    cursor: pointer;
}
.course_msg.is-active {
    background-color: #f93684;
    color: #fff;
}
.open {
    padding: 20px 0;
    text-align: center;
    width: 100%;
    color: #f93684;
    cursor: pointer;
}
.up {
    max-height: 1200px;
    transition: max-height 1s linear;
}
.down {
    max-height: 100px;
    transition: max-height 0.5s linear;
}
.transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
}
.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
    opacity: 0;
}
.container {
    width: 1200px;
    margin: 20px auto 20px;
}


</style>